<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>DeepAI</title>
  
  <!-- 添加赛博朋克风格所需资源 -->
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
  <!-- 添加 tsParticles 库 -->
  <script src="https://cdn.jsdelivr.net/npm/tsparticles@2.12.0/tsparticles.bundle.min.js"></script>
  
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Orbitron', sans-serif;
      color: #00f3ff;
      overflow: hidden;
      background: transparent !important; /* 关键修改 */
    }
    #app {
      position: relative;
      height: 100vh;
      width: 100vw;
      background: transparent !important; /* 关键修改 */
    }
  </style>
</head>
<body>
  <noscript>
    <strong>请启用JavaScript以正常使用DeepAI系统</strong>
  </noscript>
  
  <!-- 添加背景音乐 -->
  <audio id="bg-music" loop>
    <source src="<%= BASE_URL %>background-music.mp3" type="audio/mpeg">
  </audio>
  
  <!-- 视频背景保持不变 -->
  <video autoplay muted loop id="bg-video" poster="<%= BASE_URL %>background-poster.png">
    <source src="<%= BASE_URL %>background.mp4" type="video/mp4">
    <img src="<%= BASE_URL %>background-poster.png" alt="背景图片" style="display:none;">
  </video>
  
  <div id="app"></div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const video = document.getElementById('bg-video');
      const music = document.getElementById('bg-music');
      
      // 添加音乐控制按钮到body
      const musicControl = document.createElement('div');
      musicControl.innerHTML = `
        <button id="music-toggle" style="
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 1000;
          background: rgba(0,0,0,0.5);
          color: #00f3ff;
          border: 1px solid #00f3ff;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          cursor: pointer;
        ">♪</button>
      `;
      document.body.appendChild(musicControl);
      
      // 音乐控制逻辑
      const toggleBtn = document.getElementById('music-toggle');
      toggleBtn.addEventListener('click', () => {
        if (music.paused) {
          music.play();
          toggleBtn.innerHTML = '♪';
        } else {
          music.pause();
          toggleBtn.innerHTML = '🔇';
        }
      });
      
      // 视频加载完成后显示
      video.addEventListener('loadeddata', function() {
        this.classList.add('loaded');
      });
      
      // 确保视频循环播放
      video.loop = true;
      video.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
      }, false);
      
      // 粒子效果
      // 等待 tsParticles 加载完成后再初始化
      window.addEventListener('load', async () => {
        if (typeof tsParticles !== 'undefined') {
          await tsParticles.load("app", {
            preset: "stars",
            particles: {
              color: { value: ["#00f3ff", "#ff00ff"] },
              size: { random: true },
              move: { enable: true }
            },
            background: { opacity: 0 }
          });
        }
      });
    });
  </script>
</body>
</html>